<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        <author-base-info
          :author="user"
          class="abi"
          @follow="follow(user)"
        ></author-base-info>
        <div class="span"></div>
      </li>
    </ul>
    <loading-card
      class="loading-card"
      ref="loading"
      :nomore="nomore"
    ></loading-card>
  </div>
</template>

<script lang="ts" setup>
import AuthorBaseInfo from '../pages/index/components/author/profile/AuthorBaseInfo.vue'
import LoadingCard from '@c/utils/LoadingCard2.vue'
import { ref } from 'vue'
import { post } from '@/utils/request'
import { show } from '@/utils/popup'

const props = defineProps<{
  users: App.Author[]
}>()

let nomore = ref(false)

function follow(user: App.Author) {
  post('author/follow', {
    id: user.id,
  })
    .then((res) => {
      if (user.isFollow) {
        show('取消关注成功')
      } else {
        show('关注成功')
      }
      user.isFollow = !user.isFollow
      // TODO: fetch user info
      // this.$store.commit('fetchUserInfos')
    })
    .catch((error) => {
      if (user.isFollow) {
        show('取消关注失败')
      } else {
        show('关注失败')
      }
    })
}

// TODO: Scrollload
// onMounted(() => {
//     this.$scrollLoad({
//       loadingComponent: this.$refs.loading.$el,
//       callback: (entries) => {
//         let entry = entries[0]
//         if (entry.isIntersecting) {
//           let bl = this.users.length
//           this.$emit('fetchUsers')
//           setTimeout(() => {
//             let al = this.users.length
//             if (al - bl < 10) {
//               this.nomore = true
//             } else {
//               this.nomore = false
//             }
//           }, 1000)
//         }
//       },
//     })
// })
</script>

<style lang="scss" scoped>
$w: var(--userListWidth);

ul {
  width: $w;

  li {
    width: $w;

    .abi {
      --authorBaseInfoWidth: $w;
      --authorBaseInfoHeight: calc($w * 0.15);
    }

    .span {
      width: $w;
      margin: calc($w * 0.03), 0;
      height: 1px;
      background-color: var(--light);
    }
  }
}

.loading-card {
  --loadingCardWidth: $w;
  --loadingCardHeight: 200px;
}
</style>
